<template>
  <el-dialog title="风险对象详情" :visible.sync="visible" width="50%" :before-close="handleClose">
    <el-form :model="formData" label-position="right">
      <el-form-item label="风险分析对象" :label-width="formLabelWidth">
        <el-input v-model="formData.ONAME" readonly style="width:100%;" />
      </el-form-item>
      
      <el-form-item label="分类" :label-width="formLabelWidth">
        <el-input v-model="formData.OTYPE_TEXT" readonly style="width:100%;" />
      </el-form-item>

      <el-form-item label="编码" :label-width="formLabelWidth">
        <el-input v-model="formData.HAZARD_COD" readonly style="width:100%;" />
      </el-form-item>

      <el-form-item label="是否重大危险源" :label-width="formLabelWidth">
        <el-input v-model="formData.OIFRISK_TEXT" readonly style="width:100%;" />
      </el-form-item>

      <el-form-item label="责任部门" :label-width="formLabelWidth">
        <el-input v-model="formData.HAZARD_DEP" readonly style="width:100%;" />
      </el-form-item>

      <el-form-item label="操作责任人" :label-width="formLabelWidth">
        <el-input v-model="formData.CZ_HAZARD_PERSON" readonly style="width:100%;" />
      </el-form-item>

      <el-form-item label="操作责任人-职责" :label-width="formLabelWidth">
        <el-input v-model="formData.CZ_LIABLE_DUTY" readonly style="width:100%;" />
      </el-form-item>

      <template v-if="showExtraFields">
        <el-form-item label="技术责任人" :label-width="formLabelWidth">
          <el-input v-model="formData.JS_HAZARD_PERSON" readonly style="width:100%;" />
        </el-form-item>

        <el-form-item label="技术责任人-职责" :label-width="formLabelWidth">
          <el-input v-model="formData.JS_LIABLE_DUTY" readonly style="width:100%;" />
        </el-form-item>

        <el-form-item label="主要责任人" :label-width="formLabelWidth">
          <el-input v-model="formData.HAZARD_LIABLE_PERSON" readonly style="width:100%;" />
        </el-form-item>

        <el-form-item label="主要责任人-职责" :label-width="formLabelWidth">
          <el-input v-model="formData.HAZARD_LIABLE_DUTY" readonly style="width:100%;" />
        </el-form-item>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'LookDevice',
  data() {
    return {
      visible: false,
      formLabelWidth: '120px',
      showExtraFields: false,
      formData: {
        ONAME: '',
        OTYPE: '',
        OTYPE_TEXT: '',
        HAZARD_COD: '',
        OIFRISK: '1',
        OIFRISK_TEXT: '',
        HAZARD_DEP: '',
        CZ_HAZARD_PERSON: '',
        CZ_LIABLE_DUTY: '',
        JS_HAZARD_PERSON: '',
        JS_LIABLE_DUTY: '',
        HAZARD_LIABLE_PERSON: '',
        HAZARD_LIABLE_DUTY: ''
      }
    }
  },
  methods: {
    show(row) {
      this.visible = true
      this.$nextTick(() => {
        // 处理分类显示文本
        const typeMap = {
          '0': '生产装置',
          '1': '罐区'
        }
        
        // 处理是否重大危险源显示文本
        const riskMap = {
          '0': '是',
          '1': '否'
        }

        this.formData = { 
          ...row,
          OTYPE_TEXT: typeMap[row.OTYPE] || row.OTYPE,
          OIFRISK_TEXT: riskMap[row.OIFRISK] || row.OIFRISK
        }
        this.showExtraFields = row.OIFRISK === '0'
      })
    },
    handleClose() {
      this.visible = false
      // 重置表单数据
      this.formData = {
        ONAME: '',
        OTYPE: '',
        OTYPE_TEXT: '',
        HAZARD_COD: '',
        OIFRISK: '1',
        OIFRISK_TEXT: '',
        HAZARD_DEP: '',
        CZ_HAZARD_PERSON: '',
        CZ_LIABLE_DUTY: '',
        JS_HAZARD_PERSON: '',
        JS_LIABLE_DUTY: '',
        HAZARD_LIABLE_PERSON: '',
        HAZARD_LIABLE_DUTY: ''
      }
    }
  }
}
</script>

<style scoped>
.el-input.is-disabled .el-input__inner {
  color: #606266;
  background-color: #fff;
  border-color: #DCDFE6;
}
</style> 